import {
  Alert,
  Image,
  Platform,
  TouchableOpacityProps,
  View,
  Text
} from "react-native";
import * as S from "./styles";
import { TaskModal } from "../TaskModal";
import { useEffect } from "react";
import /*RFValue*/ "react-native-responsive-fontsize";
import { ImageMap } from "../../constants/categories";
import { useTasks } from "../../hooks/useTasks";
import { useCategory } from "../../hooks/useCategory";
import moment from "moment";
import { showToast } from "../../utils/toast";
import { Icon } from "../Icon/index";
import { color } from "native-base/lib/typescript/theme/styled-system";

interface AddTaskButtonProps extends TouchableOpacityProps {}

export interface ButtonProps extends TouchableOpacityProps {
  children?: string;
  type?: string;
}

export const SelectionBtn = ({ type, selectedMood,isSelect, children, ...rest }: ButtonProps) => {
  // const url = ImageMap.find((image) => {
  //   return image.name === type;
  // })?.url;
  return (
    <S.ButtonContainer onPress={rest.onPress} activeOpacity={0.7} {...rest}>
      {type && isSelect &&  (
        // <Image
        //   source={url}
        //   style={{
        //     width: 18,
        //     height: 18,
        //   }}
        // />
        <View style={[{width:6,height:6,borderRadius:100,marginRight:4},{backgroundColor:selectedMood == 1 ? 'rgba(255, 141, 26, 1)' : selectedMood == 2 ? 'rgba(67, 207, 124, 1)' : selectedMood== 3 ? 'rgba(142, 142, 147, 1)' : ''}]}></View>
        
        
      )}
      
      {children && (
        <S.ButtonText style={rest.fontStyle}>{children}</S.ButtonText>
      )}
    </S.ButtonContainer>
  );
};

export function AddTaskButton({ listRef, ...rest }) {
  const {
    selectedMood,
    updateSelectedMood,
    selectedTime,
    updateSelectedTime,
    quickVisible,
    updateQuickVisible,
    activeDate,
    startDate,
    endDate,
    createTask,
    loadTasks,
    createModalVis,
    updateCreateModalVis,
  } = useTasks();

  // 选择的事件
  const { selectedCategoryId, updateSelectedStatus } = useCategory();

  useEffect(() => {
    if (selectedCategoryId && selectedMood && selectedTime) {
      const {
        id = undefined,
        eventId = undefined,
        name = undefined,
        eventName = undefined,
        eventType = undefined,
      } = selectedCategoryId || {};
      const params = {
        fatherId: eventName ? eventId : id, //常规事件和常用事件返回字段不同
        eventType: eventType,
        dateStr: activeDate,
        addTimeStr: moment().format("mm:ss"),
        event: eventName ? eventName : name,
        mood: selectedMood,
        time: selectedTime,
        remark: "",
      };
      createTask(params)
        .then(function (response) {
          // handle success
          loadTasks({
            startDate: moment(endDate)
              .format("YYYY-MM-DD"),
            endDate: moment(startDate).format("YYYY-MM-DD"),
          });
          // updateQuickVisible(false);
          showToast("success", "提示", "创建记录成功");
          updateSelectedMood(undefined);
          updateSelectedTime(undefined);
          updateSelectedStatus(false);
          listRef?.current?.scroll();
        })
        .catch((data) => {
          showToast("error", "出错了", data.msg);
        });
    }
  }, [
    activeDate,
    createTask,
    loadTasks,
    selectedCategoryId,
    selectedMood,
    selectedTime,
    startDate,
    updateSelectedMood,
    updateSelectedStatus,
    updateSelectedTime,
  ]);

  return (
    <View>
      <View>
        <S.QuickActionTask
          style={{
            display: quickVisible ? "flex" : "none",
            shadowColor: Platform.OS === "android" ? "" : "rgba(0, 0, 0, 0.08)", // 阴影颜色
            shadowOffset: { width: 2, height: 2 }, // 阴影偏移
            shadowOpacity: 1, // 阴影不透明度
            shadowRadius: 5, // 阴影半径
            elevation: 9, // 阴影深度
          }}
        >
          <S.QuickActionGroup>
            <SelectionBtn
              style={[
                {
                  padding: /*RFValue*/ 14,
                  borderTopLeftRadius: /*RFValue*/ 12,
                  borderTopRightRadius: /*RFValue*/ 12,
                  borderBottomWidth: /*RFValue*/ 1,
                  borderBottomColor: "white",
                },
                selectedTime === "0.5" && {
                  backgroundColor: "rgba(198, 224, 247, 1)",
                },
              ]}
              fontStyle={{ fontWeight: "700", fontSize: /*RFValue*/ 14 }}
              onPress={() => updateSelectedTime("0.5")}
            >
              0.5h
            </SelectionBtn>
            <SelectionBtn
              style={[
                {
                  padding: /*RFValue*/ 14,
                  borderBottomWidth: /*RFValue*/ 1,
                  borderBottomColor: "white",
                },
                selectedTime === "1" && {
                  backgroundColor: "rgba(198, 224, 247, 1)",
                },
              ]}
              fontStyle={{ fontWeight: "700", fontSize: /*RFValue*/ 14 }}
              onPress={() => updateSelectedTime("1")}
            >
              1h
            </SelectionBtn>
            <SelectionBtn
              style={[
                {
                  padding: /*RFValue*/ 14,
                  borderBottomWidth: /*RFValue*/ 1,
                  borderBottomColor: "white",
                },
                selectedTime === "1.5" && {
                  backgroundColor: "rgba(198, 224, 247, 1)",
                },
              ]}
              fontStyle={{ fontWeight: "700", fontSize: /*RFValue*/ 14 }}
              onPress={() => updateSelectedTime("1.5")}
            >
              1.5h
            </SelectionBtn>
            <SelectionBtn
              style={[
                {
                  padding: /*RFValue*/ 14,
                  borderBottomLeftRadius: /*RFValue*/ 12,
                  borderBottomRightRadius: /*RFValue*/ 12,
                },
                selectedTime === "2" && {
                  backgroundColor: "rgba(198, 224, 247, 1)",
                },
              ]}
              fontStyle={{ fontWeight: "700", fontSize: /*RFValue*/ 14 }}
              onPress={() => updateSelectedTime("2")}
            >
              2h
            </SelectionBtn>
          </S.QuickActionGroup>
          <S.QuickActionGroup style={{ marginTop: /*RFValue*/ 8 }}>
            
            <SelectionBtn
              style={[
                {
                  paddingVertical: /*RFValue*/ 7,
                  borderTopLeftRadius: /*RFValue*/ 12,
                  borderTopRightRadius: /*RFValue*/ 12,
                  borderBottomWidth: /*RFValue*/ 1,
                  borderBottomColor: "white",
                },
                selectedMood === "1" && {
                  backgroundColor: "rgba(198, 224, 247, 1)",
                },
              ]}
              fontStyle={{ fontWeight: "700", fontSize: /*RFValue*/ 14,color:selectedMood==1 ? 'rgba(255, 141, 26, 1)' : 'rgba(44, 44, 46, 1)' }}
              onPress={() => updateSelectedMood("1")}
              type="smail"
              selectedMood={selectedMood}
              isSelect={selectedMood == '1'}
            >      
              高
             
            </SelectionBtn>
            <SelectionBtn
              style={[
                { paddingVertical: /*RFValue*/ 7 },
                selectedMood === "2" && {
                  backgroundColor: "rgba(198, 224, 247, 1)",
                },
              ]}
              fontStyle={{ fontWeight: "700", fontSize: /*RFValue*/ 14,color:selectedMood==2 ? 'rgba(67, 207, 124, 1)' : 'rgba(44, 44, 46, 1)' }}
              onPress={() => updateSelectedMood("2")}
              type="cry"
              selectedMood={selectedMood}
              isSelect={selectedMood == '2'}
            >
              中
            </SelectionBtn>
            <SelectionBtn
              style={[
                {
                  borderTopWidth: /*RFValue*/ 1,
                  borderTopColor: "white",
                  borderBottomLeftRadius: /*RFValue*/ 12,
                  borderBottomRightRadius: /*RFValue*/ 12,
                  paddingVertical: /*RFValue*/ 7,
                },
                selectedMood === "3" && {
                  backgroundColor: "rgba(198, 224, 247, 1)",
                },
              ]}
              fontStyle={{ fontWeight: "700", fontSize: /*RFValue*/ 14,color:selectedMood==3 ? 'rgba(142, 142, 147, 1)' : 'rgba(44, 44, 46, 1)' }}
              onPress={() => updateSelectedMood("3")}
              type="normal"
              selectedMood={selectedMood}
              isSelect={selectedMood == '3'}
            >
              低
            </SelectionBtn>
          </S.QuickActionGroup>
        </S.QuickActionTask>
      </View>
      <S.QuickAddTask
        {...rest}
        style={shadowStyle}
        onPress={() => updateQuickVisible(!quickVisible)}
      >
        <S.AddTaskWrapper colors={ !quickVisible ? ['rgba(255,255,255,1)', 'rgba(255,255,255,1)'] : ['#fff','#fff']}  style={quickVisible && { backgroundColor:"white" ,borderColor:'#2C2C2E',borderWidth:2}}>
          {/* <S.AddTaskIcon name="quick" color={"red"} /> */}
          <Icon style={{fontSize:24}} color={ !quickVisible ? '#2C2C2E' : '#2C2C2E' } name="quick"/>
        </S.AddTaskWrapper>
      </S.QuickAddTask>
      <S.AddTask
        {...rest}
        style={shadowStyle}
        onPress={() =>{
          listRef.current.scroll();
          updateCreateModalVis(true)}
        }
      >
        <S.AddTaskWrapper colors={['rgba(255,255,255,1)', 'rgba(255,255,255,1)']}>
          {/* <S.AddTaskIcon name="create" /> */}
          <Icon style={{fontSize:24}}  color={'#2C2C2E'} name="create"/>
        </S.AddTaskWrapper>
      </S.AddTask>
    </View>
  );
}

const shadowStyle = Platform.select({
  ios: {
      shadowColor: 'rgb(0, 0, 0)',
      shadowOffset: { width: 4, height: 8 },
      shadowOpacity: 0.2,
      shadowRadius: 4,
  },
  android: {
    shadowColor: Platform.OS === "android" ? "" : "rgba(0, 0, 0, 0.08)", // 阴影颜色
    shadowOffset: { width: 2, height: 2 }, // 阴影偏移
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 5, // 阴影半径
    elevation: 9, // 阴影深度
  },
});
